<!-- html5标准的文档类型 -->
<!DOCTYPE html>
<!-- zh-CN  en -->
<html lang="zh-CN">
  <head>
      <!-- 编码方式 utf-8 -->
    <meta charset="utf-8">
    <!-- 使用最新的ie标准 或者 模式 来渲染我们的页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 适配 移动端  -->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>布局容器</title>

    <!-- Bootstrap -->
    <!-- 加载 bootstrap 核心样式表 -->
    <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!-- lt less then -->
    <!--[if lt IE 9]>
      <script src="./lib/html5shiv/html5shiv.min.js"></script>
      <script src="./lib/respond/respond.min.js"></script>
    <![endif]-->
  </head>
  <style>
    .container{
      height: 200px;
      background-color: red;
    }
    .container-fluid{
      height: 200px;
      background-color:blue;
    }
  </style>
  <body>
    <!-- 
      .container 固定的宽度
      w>1200 大屏幕   1170px
      w:992~1200 中等屏幕 970px
      w:768~992 小屏幕 750px
      w<768  超小屏幕 移动设备 100%
     -->
      <div class="container">

      </div>
     
     <div class="container-fluid">
       
     </div>
     

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./lib/jquery/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>